import React from 'react';
import {ListView} from 'antd-mobile';
import ReactDOM from 'react-dom';

// 自定义 body 的包裹组件
function MyBody(props) {
  return (
    <div className="am-list-body my-body">
      {props.children}
    </div>
  );
}
const data = [
  {
    img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png',
    title: 'Meet hotel',
    des: '不是所有的兼职汪都需要风吹日晒',
  },
  {
    img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
    title: 'McDonald\'s invites you',
    des: '不是所有的兼职汪都需要风吹日晒',
  },
  {
    img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
    title: 'Eat the week',
    des: '不是所有的兼职汪都需要风吹日晒',
  },
  {
    img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png',
    title: 'Meet hotel',
    des: '不是所有的兼职汪都需要风吹日晒',
  },
  {
    img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
    title: 'McDonald\'s invites you',
    des: '不是所有的兼职汪都需要风吹日晒',
  },
  {
    img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
    title: 'Eat the week',
    des: '不是所有的兼职汪都需要风吹日晒',
  },
  {
    img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png',
    title: 'Meet hotel',
    des: '不是所有的兼职汪都需要风吹日晒',
  },
  {
    img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
    title: 'McDonald\'s invites you',
    des: '不是所有的兼职汪都需要风吹日晒',
  },
  {
    img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
    title: 'Eat the week',
    des: '不是所有的兼职汪都需要风吹日晒',
  },
  {
    img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png',
    title: 'Meet hotel',
    des: '不是所有的兼职汪都需要风吹日晒',
  },
  {
    img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
    title: 'McDonald\'s invites you',
    des: '不是所有的兼职汪都需要风吹日晒',
  },
  {
    img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
    title: 'Eat the week',
    des: '不是所有的兼职汪都需要风吹日晒',
  },
  {
    img: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png',
    title: 'Meet hotel',
    des: '不是所有的兼职汪都需要风吹日晒',
  },
  {
    img: 'https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png',
    title: 'McDonald\'s invites you',
    des: '不是所有的兼职汪都需要风吹日晒',
  },
  {
    img: 'https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png',
    title: 'Eat the week',
    des: '不是所有的兼职汪都需要风吹日晒',
  },
];

const NUM_SECTIONS = 1; // 行块数据
const NUM_ROWS_PER_SECTION = 20; // 行块下行数
let pageIndex = 0; // 默认第几个

const dataBlobs = {};
let sectionIDs = [];
let rowIDs = [];


// 获取数据

//  生成行块
function genData(pIndex = 0) {
  // 生成行块
  for (let sIndex = 0; sIndex < NUM_SECTIONS; sIndex++) {
    const newIndex = (pIndex * NUM_SECTIONS) + sIndex;
    const sectionName = `Section_${newIndex}`;
    sectionIDs.push(sectionName);
    dataBlobs[sectionName] = sectionName;
    rowIDs[newIndex] = [];
    // 生成行
    for (let rIndex = 0; rIndex < NUM_ROWS_PER_SECTION; rIndex++) {
      const rowName = `S${newIndex}_R${rIndex}`;
      rowIDs[newIndex].push(rowName);
      dataBlobs[rowName] = rowName;
    }
  }

  sectionIDs = [...sectionIDs];
  rowIDs = [...rowIDs];
  console.log("sectionIDs",sectionIDs,rowIDs)



}


class ConListView extends React.Component {

  constructor(props) {
    super(props);
    const dataSource = new ListView.DataSource({
      getRowData:(dataBlob, sectionID, rowID) => dataBlob[rowID],
      rowHasChanged: (row1, row2) => row1 !== row2,
      sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
    });

    this.state = {
      dataSource,
      isLoading: true,
      height: document.documentElement.clientHeight * 3 / 4,
    };
  }

  //
  componentDidMount() {
    const height = document.documentElement.clientHeight - ReactDOM.findDOMNode(this.lv).parentNode.offsetTop;
    genData();
    this.setState({
      dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlobs, sectionIDs, rowIDs),
      isLoading: false,
      height,
    });
  }


  onEndReached = (event) => {

    if (this.state.isLoading && !this.state.hasMore) {
      return;
    }

    this.setState({isLoading: true});
    genData(++pageIndex);

    //
    setTimeout(() => {
      this.setState({
        dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlobs, sectionIDs, rowIDs),
        isLoading: false,
      });
    }, 600);


  }


  render() {

    // 分割线
    const separator = (sectionID, rowID) => (
      <div
        key={`${sectionID}-${rowID}`}
        style={{
          backgroundColor: '#F5F5F9',
          height: 8,
          borderTop: '1px solid #ECECED',
          borderBottom: '1px solid #ECECED',
        }}
      />
    );


    let index = data.length - 1;

    console.log("index====",index)


    const row = (rowData, sectionID, rowID) => {
      console.log("rowID",rowID,rowData, sectionID);
      if (index < 0) {
        index = data.length - 1;
      }
      const obj = data[index--];


      return (
        <div key={rowID} style={{padding: '0 15px'}}>
          <div>{obj.title+"--000000--"+index}</div>
          <div style={{display: '-webkit-box', display: 'flex', padding: '15px 0'}}>
            <img style={{height: '64px', marginRight: '15px'}} src={obj.img} alt=""/>
            <div style={{lineHeight: 1}}>
              <div style={{marginBottom: '8px', fontWeight: 'bold'}}>{obj.des}</div>
              <div><span style={{fontSize: '30px', color: '#FF6E27'}}>35</span>¥ {rowID}</div>
            </div>
          </div>
        </div>
      );
    };

    // console.log("row",row.length);
    // console.log("this.state.dataSource",sectionIDs, rowIDs);

    // console.log("this.state.dataSource----",this.state.dataSource)

    return (

      <ListView
        ref={el => this.lv = el}
        dataSource={this.state.dataSource}
        renderFooter={() => (
          <div style={{padding: 10, textAlign: 'center'}}>
            {this.state.isLoading ? 'Loading...' : 'Loaded'}
          </div>
        )}

        // renderSectionHeader={sectionData => (
        //   <div>{`Task ${sectionData.split(' ')[1]}`}</div>
        // )}

        renderBodyComponent={() => <MyBody/>}
        renderRow={row}
        renderSeparator={separator}
        style={{
          height: this.state.height,
          overflow: 'auto',
        }}
        pageSize={4}
        onScroll={() => {
          console.log('scroll');
        }}
        scrollRenderAheadDistance={500}
        onEndReached={this.onEndReached}
        onEndReachedThreshold={10}
      />

    );
  }
}

export default ConListView;
